<template>
    <div class="tab_user">
        <div class="city">
            <!-- <el-image :src="baseUrl + info.reviewerAvatar" lazy-load></el-image> -->
            <li-image :src="info.reviewerAvatar" lazy-load />
        </div>
        <div class="">
            <div class="name">
                <span :title="info.reviewer">{{ showName(info.reviewer)|| ''}}</span>
            </div>
            <div class="mobile">
                {{ info.reviewerPhone || '' }}
            </div>
        </div>
    </div>
</template>
<script>
import config from '@/http/config.js' // 倒入默认配置
export default {
    name: "ReviewUser",
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            },
        },
        city: {
            type: Boolean,
            default: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            showDialog: false,
            baseUrl: config.baseURL
        };
    },
    mounted() { 
        console.log(this.baseUrl + this.info.reviewerAvatar)
    },
    methods: {
        // 展示用户姓名
        showName(str) {
            let o = str;
            if (!str) {
                return "";
            }
            if (str.length > 3) {
                o = str.slice(0, 3) + "...";
            }
            return o;
        },

        // 处理标签字段
        getTags(str) {
            if (!str) {
                return false;
            }
            let arr = str.split(":");
            return arr[0];
        },
    },
};
</script>
<style lang="scss" scoped>
.tab_user {
    display: flex;
    align-items: center;
    cursor: pointer;

    .city {
        position: relative;
        width: 36px;
        height: 36px;
        background: #167fff;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff !important;
        text-align: center;
        line-height: 36px;
        margin-right: 7px;
        overflow: hidden;

        .tag_bg {
            position: absolute;
            width: 40px;
            height: 30px;
            transform: rotate(-45deg);
            background: rgba(254, 174, 77, 1);
            box-shadow: 0px 2px 3px 0px rgba(15, 103, 212, 0.35);
            left: -24px;
            top: -15px;
            text-align: center;
            line-height: 10px;
            z-index: 1;
        }

        .tag {
            position: absolute;
            left: 2px;
            top: 1px;
            font-size: 12px;
            z-index: 2;
            line-height: 12px;
            zoom: 0.8;
        }
    }

    .name {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #167fff;

        img {
            width: 14px;
            height: 14px;
            margin-left: 7px;
        }

        .cred {
            color: #f00;
        }
    }

    .mobile {
        font-size: 12px;
        font-family: DIN-Regular, DIN;
        font-weight: 400;
        color: #999999;
        margin: 0;
        padding: 0;
    }
}
</style>